<ion-view view-title="Login" align-title="left" ng-controller="loginController" ng-init="ionNavNar.enable=true">
    <link href="../../css/login.css" rel="stylesheet">
    <ion-nav-bar class="bar-positive" ngif="ionNavNar.enable">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-content>
        <md-content layout-padding>
            <form name="loginForm" novalidate>
                <div class="login-div">
                    <div class="login-box">
                        <div class="hero no-header flat">
                            <div class="content">
                                <div class="app-icon"></div>
                                <h1>
                                    MyPig
                                    <span style="font-size: 10px;">{{ 'v%VERSION%' | versionFilter }}</span><img ng-init="dataLoading = true;" ng-if="dataLoading" src="" />
                                </h1>
                            </div>
                        </div>
                        <div class="list inputdeErrors">
                            <md-input-container class="md-block" flex-gt-sm>
                                <label>Username</label>
                                <input name="username" ng-model="user.username" minlength="6" md-maxlength="30" required/>
                                <div class="hint" ng-if="!loginForm.username.$touched && !loginForm.username.$valid">
                                    Please enter your <code>username</code>.
                                </div>
                                <div class="hint" ng-if="loginForm.username.$valid">
                                    Welcome <code>{{user.username}}</code>.
                                </div>
                                <div ng-messages="loginForm.username.$error" ng-if="loginForm.username.$touched">
                                    <div ng-message="required">Userame is required.</div>
                                    <div ng-message="minlength">The username has to be more than 6 characters long.</div>
                                    <div ng-message="md-maxlength">The username has to be less than 30 characters long.</div>
                                </div>
                            </md-input-container>
                            <md-input-container class="md-block" flex-gt-sm>
                                <label>Password</label>
                                <input type="password" name="password" ng-model="user.password" minlength="6" md-maxlength="30" required/>
                                <div class="hint" ng-if="!loginForm.password.$touched && !loginForm.password.$valid">
                                    Please enter your <code>password</code>.
                                </div>
                                <div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$touched">
                                    <div ng-message="required">Password is required.</div>
                                    <div ng-message="minlength">The password has to be more than 6 characters long.</div>
                                    <div ng-message="md-maxlength">
                                        The password has to be less than 30 characters long.
                                    </div>
                                </div>
                            </md-input-container>
                        </div>
                        <div class="padding">
                            <button ng-click="toLogin(user)" ng-disabled="loginForm.$invalid" class="button button-full button-assertive ink">Login</button>
                        </div>
                        <div class="button-bar social-login">
                            <button type="submit" class="button button-small button-border icon-left ion-social-google button-assertive-900">
                                Google+
                            </button>
                            <button class="button button-small button-border icon-left ion-social-twitter button-calm-900">
                                Twitter
                            </button>
                            <button class="button button-small button-border icon-left ion-social-facebook button-positive-900">
                                Facebook
                            </button>
                        </div>

                    </div>
                </div>
            </form>
        </md-content>
    </ion-content>
</ion-view>
